<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 折线图 -->
    <el-card>
      <ve-line :data="chartData"></ve-line>
    </el-card>
    <!-- 柱状图 -->
    <el-card>
      <ve-histogram :data="chartData"></ve-histogram>
    </el-card>
    <!-- 饼状图 -->
    <el-card>
      <p>{{pieData.title}} 访问量数据:</p>
      <ve-pie :data="pieData"></ve-pie>
    </el-card>
    <!-- 一天 中 不同地区的访问量 -->
     <el-card>
      <p>{{pieOneDay.title}} 不同地区访问量数据:</p>
      <ve-pie :data="pieOneDay"></ve-pie>
    </el-card>
  </div>
</template>

<script>
import { getReports } from "@/api/reports";
export default {
  data: function() {
    return {
      chartData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      // 饼状图数据
      pieData: {
        title: "华南",
        columns: ["日期", "华南"],
        rows: [
          { 日期: "2020-02-24", 华南: 2863 },
          { 日期: "2020-02-25", 华南: 2003 }
        ]
      },
      // 饼状图数据
      pieOneDay: {
        title: "2018-1-1",
        columns: ["地区", "访问量"],
        rows: [
          {
            地区: "华东",
            访问量: 1908
          }
        ]
      },
      resDate: {}
    };
  },
  created() {
    this.fetchReports();
  },
  methods: {
    // 获取 类型 1 的报表数据
    async fetchReports() {
      let res = await getReports("1");
      console.log(res);
      this.resDate = res;

      this.lineAndHistogramData();
      this.pieConcatData();
      this.pieConcatOneDay();
    },
    // 组装 类型 1 柱状 和 折线图数据
    lineAndHistogramData() {
      // 解构数据
      let { legend, series, xAxis } = this.resDate.data;
      // 组装统计数据
      // 1.合并列数据
      // 使用数据的拼接方法
      // let  columns = ['日期'].concat(legend.data)
      //
      let columns = ["日期", ...legend.data];
      // console.log(columns);
      // 2. 合并行数据
      // 遍历 数组 series
      let rows = [];
      // 2.1 先遍历 日期， 当天 不同地区的 数据
      xAxis[0].data.forEach((v, indexDate) => {
        let obj = { 日期: v };
        // console.log(v);
        // 通过 日期索引 获取 不同地区的 访问总量
        series.forEach(item => {
          // console.log(item.name);
          // console.log(item.data[indexDate]);
          obj[item.name] = item.data[indexDate];
        });
        console.log(obj);
        rows.push(obj);
      });
      // 刷新 报表展示数据
      this.chartData = {
        columns,
        rows
      };
    },
    // 组装 类型 1 饼状图 数据 (不同 时间 同一地区的 访问比例)
    pieConcatData() {
      // 解构数据
      let {series, xAxis} = this.resDate.data;
      // 遍历日期
      let title = this.pieData.title;
      let columns = ["日期", title];
      let rows = [];
      xAxis[0].data.forEach((item, indexDate) => {
        // 得到 日期
        let row = { 日期: item };
        series.forEach(v => {
          // 这一日期不同地区的 数据
          if (title === v.name) {
            //将 过滤 出的 地区数据 放置到 row 中
            row[title] = v.data[indexDate];
          }
        });
        // console.log(row);
        rows.push(row);
      });
      // 展示 饼状图
      this.pieData = {
        title,
        columns,
        rows
      };
    },

    // 组装 类型 1 饼状图 数据 (同一 时间 不同地区的 访问比例)
    pieConcatOneDay() {
      // 组装 一天中 不同地区的 数据
      // 解构数据
      let {series, xAxis} = this.resDate.data;
      // 遍历日期
      let columns = ["地区", "访问量"];
      let rows = [];
      // 规定 日期 2018-1-1
      // 只有六天数据 索引 0~5
      const dateIndex = 0;
      let dateDay = xAxis[0].data[dateIndex];
      console.log(xAxis[0].data[dateIndex]);
      series.forEach(item => {
        let row = {};
        row["地区"] = item.name;
        row["访问量"] = item.data[dateIndex];
        // console.log(row);
        rows.push(row);
      });
      // 展示饼状图数据
      this.pieOneDay = {
        title: dateDay,
        columns,
        rows
      };
    }
  }
};
</script>

<style lang="scss" scoped>
</style>